$(function () {
      let $image = $('#image')
      // 1.2 配置选项
      const options = {
            // 纵横比
            aspectRatio: 1,
            // 指定预览区域
            preview: '.img-preview'
      }
      // 1.3 创建裁剪区域
      $image.cropper(options)

      $('#chooseImageBtn').on('click', function () {
            $('#chooseImageInp').click()
            $image.cropper(options)
      })
      $('#chooseImageInp').on('change', function () {
            let file = this.files[0]
            if (file == undefined) {
                  return layui.layer.msg("上传头像，不能为空！")
            }
            let url = URL.createObjectURL(file)
            $image
                  .cropper("destroy")
                  .attr('src', url)
                  .cropper(options)
      })
      // 上传头像
      $('#uploadBtn').on('click', function () {
            let dataURL = $image
                  .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                        width: 100,
                        height: 100
                  })
                  .toDataURL('image/png')       // 将 Canvas 画布上的内容，转化为 base64 格式的字符串


            // 发送axios请求跟换用户头像
            axios({
                  url: '/my/update/avatar',
                  method: 'POST',
                  data: "avatar=" + encodeURIComponent(dataURL)
            }).then(res => {
                  if (res.data.status !== 0) {
                        return layui.layer.msg(res.data.message)
                  }
                  layui.layer.msg('恭喜您,跟改用户头像成功！')
                  window.parent.getUserInfo()
            });
      })

})

